<template>
  <div>
    <div>
      <el-form :inline="true" :model="{}">
        <el-form-item>
          <el-date-picker
            v-model="data.star"
            type="date"
            placeholder="订单开始日期"
            size="small"
          />
          <span>至</span>
          <el-date-picker
            v-model="data.stop"
            type="date"
            placeholder="订单结束日期"
            size="small"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="设备编号"
            v-model="data.eqnum"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary">查询 </el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="warning">导出</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData" style="width: 100%; font-size: 3px">
        <el-table-column prop="campus" label="校区" width="60px" />
        <el-table-column prop="building" label="楼栋" width="50px" />
        <el-table-column prop="dormitory_number" label="宿舍号" width="60px" />
        <el-table-column prop="eqid" label="设备编号" width="75px" />
        <el-table-column prop="eqtype" label="设备类型" width="75px" />
        <el-table-column prop="amount" label="剩余金额" />
        <el-table-column prop="total_ele" label="总电量" width="70px" />
        <el-table-column
          prop="total_active_power"
          label="总有功电量"
          width="115px"
        >
          <template #default>
            <div class="tags">
              <el-tag
                link
                type="warning"
                size="small"
                v-for="item in power.total_actice_power"
                :key="item"
                >{{ item.name }}</el-tag
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="single_phase_data"
          label="单相数据"
          width="115px"
        >
          <template #default>
            <div class="tags">
              <el-tag
                link
                type="warning"
                size="small"
                v-for="item in power.single_phase_data"
                :key="item"
                >{{ item.name }}</el-tag
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="ABC三相数据" width="125px">
          <template #default>
            <div class="tags">
              <el-tag link type="warning" size="small">ABC三相电压(V)</el-tag>
              <el-tag link type="warning" size="small">ABC三相电流(A)</el-tag>
              <el-tag link type="warning" size="light"
                >总ABC<br />
                三相功率(W)</el-tag
              >
              <el-tag link type="warning" size="light"
                >总ABC三相<br />
                无功功率(W)</el-tag
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="功率因素" width="115px">
          <template #default>
            <div class="tags">
              <el-tag
                link
                type="warning"
                size="small"
                v-for="item in power.power_factor"
                :key="item"
                >{{ item.name }}</el-tag
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="paytime" label="频率" width="60px" />
        <el-table-column label="抄表状态">
          <template #default="scope">
            <el-tag
              link
              :type="scope.row.status === '正常' ? 'success' : 'danger'"
              size="small"
              >{{ scope.row.status }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="metertime" label="抄表时间" width="95px" />
      </el-table>
    </div>
    <div class="demo-pagination-block">
      <el-pagination
        :page-sizes="[10, 20, 50, 100]"
        :small="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { reactive } from "vue";
// import { Download } from "@element-plus/icons-vue";

const data = reactive({
  star: "",
  stop: "",
  eqnum: "",
  donum: "",
  ordernum: "",
});

const onSubmit = () => {
  console.log("submit!");
};

const tableData = reactive([
  {
    campus: "东校区",
    building: "1栋",
    dormitory_number: "985",
    eqid: "001",
    eqtype: "a",
    amount: "800125.6",
    total_ele: "188.11",
    creator: "",
    metertime: "2020-07-11 09:57:16",
    status: "正常",
  },
  {
    campus: "东校区",
    building: "2栋",
    dormitory_number: "211",
    eqid: "001",
    eqtype: "b",
    amount: "800125.6",
    total_ele: "188.11",
    creator: "",
    metertime: "2020-07-04 09:57:16",
    status: "正常",
  },
  {
    campus: "东校区",
    building: "3栋",
    dormitory_number: "520",
    eqid: "001",
    eqtype: "c",
    amount: "800125.6",
    total_ele: "188.11",
    creator: "",
    metertime: "2020-07-03 09:57:16",
    status: "正常",
  },
  {
    campus: "东校区",
    building: "2栋",
    dormitory_number: "111",
    eqid: "001",
    eqtype: "a",
    amount: "800125.6",
    total_ele: "188.11",
    creator: "",
    metertime: "2020-07-03 09:57:16",
    status: "正常",
  },
]);
const power = {
  total_actice_power: [
    { name: "总" },
    { name: "总有" },
    { name: "电量" },
    { name: "总量" },
  ],
  single_phase_data: [
    { name: "单相电压(V)" },
    { name: "单相电流(A)" },
    { name: "单项功率(W)" },
  ],
  power_factor: [
    { name: "功率因素" },
    { name: "A相功率因素" },
    { name: "B相功率因素" },
    { name: "C相功谷电量" },
  ],
};
const currentPage = ref(4);
const pageSize = ref(100);

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};

const dialogFormVisible = ref(false);
</script>




<style scoped>
.el-form-item {
  margin-right: 15px;
}
.el-form-item__content {
  width: 100%;
}
.demo-pagination-block {
  margin-top: 16px;
}
.el-tag {
  text-align: center;
}
.tags .el-tag {
  width: 95px;
  /* display: block; */
  margin-bottom: 4px;
}
</style>
